<template>
  <div>

    <el-row>
      <el-col :span="4">
        <el-select v-model="value8" placeholder="请选择商品类型" @change="xialakuang">
          <el-option value="" lable="全部">全部</el-option>
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="5" style="padding:5px;">
            <el-input v-model="name" placeholder="请输入内容"/>
          </el-col>
          <el-col :span="17" style="padding:5px;">
            <el-button type="primary" @click="search()">搜索</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>


    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" suffix-icon="el-icon-user" disabled/>
        </el-form-item>
        <el-form-item label="单价" prop="money">
          <el-input v-model="form.money" suffix-icon="el-icon-user" disabled/>
        </el-form-item>
        <el-form-item label="数量" prop="number">
          <el-input-number v-model="number" @change="handleChange" :min="0" :max="100" label="商品数量"/>
        </el-form-item>
        <el-form-item label="总价钱" prop="count">
          <el-input v-model="count" suffix-icon="el-icon-user" disabled/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate()">添加购物车</el-button>
      </span>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="商品编号" width="180"/>
      <el-table-column prop="name" label="商品名称"/>
      <el-table-column prop="money" label="价钱">
      </el-table-column>
      <el-table-column label="商品图片">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.picture" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="showWin(scope.row)" type="text" size="small">购买商品</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  created() {
    let item = sessionStorage.getItem('user_info');
    if (item != null) this.userId = JSON.parse(item).id;
    //界面加载完成往后台发送ajax请求 获取用户数据
    this.loadData();
    this.$http.post('/goods/listAllType').then(res => {
      this.options = res.data;
    })
  },
  name: "GoodsVue",
  data() {
    return {
      userId: '',
      name: "",
      number: 0,
      //搜索的关键字
      keyword: "",
      dialogVisible: false,
      //查询出购买商品的名字价格
      title: "购买商品",
      tableData: [],
      imageUrl: "",
      options: [],
      cart:[],
      tableData4:[],
      value8: '全部',
      form: {
        buyCount: '',
      },
      count: 0,
      //声明验证规则
      rules: {
        //用户名的校验规则

      }
    };
  },
  methods: {
    //加载数据
    loadData() {
      //往后台发送ajax请求
      this.$http.post("goods/listAllState", {keyword: this.keyword, name: this.name}).then(res => {
        res.data.forEach(item => {
          item.picture = "http://localhost:2011/picture/" + item.picture + '.jpg'
        })
        console.info(res)
        this.tableData = res.data;
        this.total = res.data.total;
      });
    },
    //总价钱
    handleChange(value) {
      this.count = Number(value) * Number(this.form.money.split("元")[0])
      console.log(value);
    },
    //弹出窗口
    showWin(row) {
      if (this.userId===''){
        this.$router.push("/loginCom")}
      // }else {
      //     this.tableData4.push(row.id)
      // }
      // //如果是编辑
      if (row) {
        this.form = Object.assign({}, row);
        this.title = "购买商品";
      } else {
        this.title = "";
        this.form = {}
      }
      this.dialogVisible = true;
    },

    saveOrUpdate() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          //往后台发送ajax请求
          this.form.goodsType = ''
          this.$http.post("car/CarInsert", {
            userId: this.userId,
            goodsId: this.form.id,
            buyCount: this.number,
          }).then(res => {
            if (res.data.success) {
              this.loadData();
              this.dialogVisible = false;
            } else {
              this.$message.success("添加购物车成功");
              this.dialogVisible = false
            }
          });
        } else {
          return false;
        }
      });
    },
    //搜索
    search() {
      this.loadData();
    },
    xialakuang(value) {
      //将选择的值传递后台
      this.sendToBackend(value);
    },
    //下拉框
    sendToBackend(value) {
      this.keyword = value;
      this.loadData();
    }
  },
}
</script>
<style scoped>
</style>